{% extends 'Z/base.html' %}
{% load common_extras %}
{% block title %}
{{ now_cls | capfirst }}violet A平台  {# |管道服 过滤器#}
{% endblock %}

{% block header %}
{% include 'Z/header.html' %}
{% endblock %}

{% block main %}
{% include 'Z/classes.html' %}
    {% if articles %}

    <ul class="nav">

        {#    生成多个li标签#}
        {% for article in articles %} {#for 循环获取到所有的文章数据  #}
            {% if forloop.first %}
                <div class="bottom-info">---</div>
            {% endif %}

            <li>
            {# 如果路由定义了转换器或者其他参数， 那么就不能使用URL模版标签的命名路由跳转到其他的页面 #}
                <a href="/Z/article/{{ article.id }}"> {# 标题网址 .0下标  第一篇文章 #}
                    {# <a href="{% url 'AddArticle' %}"> #}
                    <div class="left">
                        {# counter 表示for循环迭代的次数 数字默认从1开始 ，revcounter反向迭代#}
                        <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                        <p>
                            {{ article.desc }}
                        </p>
{#                        <p class="time-info">发布时间:{{ article.crate_time |date:'Y年m月d日H:i:s'}}</p>#}
                        <p class="time-info">发布时间:{{ article.creat_time|time_since}}</p>
                    </div>
                    <div class="right">
                        {{ articles.cover }}
                        <img src="/static/media/{{ article.cover }}/" alt="">
                    </div>
                </a>
            </li>
            {# forloop.lasts是否是循环的最后一次迭代 #}
            {% if forloop.last %}
                <div class="bottom-info">
                    已经到底啦！！
                </div>
            {% endif %}
        {% endfor %}
    </ul>
{% else %}
    <div class="bottom-info"> 该分类暂无文章 </div>
{% endif %}
{% endblock %}
{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>{{ now_cls }}violet A平台</title>#}
{#    <style>#}
{#        * {#}
{#            margin: 0px;#}
{#            padding: 0px;#}
{#        }#}
{##}
{#        li {#}
{#            list-style: none;#}
{#        }#}
{##}
{#        a {#}
{#            text-decoration: none;#}
{#            color: black;#}
{#        }#}
{#        .header{#}
{#           margin: 0 20px 5px; {# 上 左右 下 #}
{#            border-radius: 20px;#}
{#            box-shadow:rgb(99,99,99,0.2) 0 2px 4px 0;#}
{#            display: flex;#}
{#            padding: 10px;#}
{#        }#}
{##}
{##}
{##}
{#        .nav {#}
{#            width: 1200px;#}
{#            margin: 44px auto;#}
{#        }#}
{##}
{#        .nav li {#}
{#            border-bottom: 2px black solid;#}
{#            padding: 14px;#}
{#        }#}
{##}
{#        .nav li h4:hover {#}
{#            color: dodgerblue;#}
{#        }#}
{##}
{#        .nav li div {#}
{#            display: inline-block;#}
        {# 行快标签 #}
{#        }#}
{##}
{#        .nav li .left {#}
{#            width: 800px;#}
{#        }#}
{##}
{#        .nav li .right img {#}
{#            width: 260px;#}
{#        }#}
{##}
{#        .bottom-info {#}
{#            text-align: center;#}
{#            margin-top: auto;#}
{#            color: darkgray;#}
{#        }#}
{#        #}
{#    </style>#}

{#</head>#}
{#<body>#}
{#<div class="header">#}
{#    <div class="left">#}
{#        <a href="{% url 'index' %}">首页</a> {# 路由标签可以直接通过 命名路由 跳转到指定页面 #}
{#    </div>#}
{#    <div class="right">#}
{##}
{#    </div>#}
{#</div>#}

{# 各页面中 的分类 分类  #}
{#<ul class="classes-box">#}
{#{% for i in classes %} {# 迭代分类名 #}
{#    <li>#}
{#    <a href="/Z/nav/{{ i }}"#}
{#            {% if now_cls == i %} style=" background-color: darkgray" {% endif %} >#}
{#        {{ i }}#}
{#    </a>#}
{#    </li>#}
{#{% endfor %}#}
{#</ul>#}

{#{% if articles %}#}
{##}
{#    <ul class="nav">#}
{##}
        {#    生成多个li标签#}
{#        {% for article in articles %} {#for 循环获取到所有的文章数据  #}
{##}
{#            <li>#}
{#                <a href="{{ articles.detail }}"> {# 标题网址 .0下标  第一篇文章 #}
{#                    <div class="left">#}
                        {# counter 表示for循环迭代的次数 数字默认从1开始 ，revcounter反向迭代#}
{#                        <h4>{{ forloop.counter }}、{{ article.title }}</h4>#}
{#                        <p>#}
{#                            {{ article.desc }}#}
{#                        </p>#}
{#                    </div>#}
{#                    <div class="right">#}
{#                        <img src="{{ article.img }}" alt="">#}
{#                    </div>#}
{#                </a>#}
{#            </li>#}
            {# forloop.lasts是否是循环的最后一次迭代 #}
{#            {% if forloop.last %}#}
{#                <div class="bottom-info">#}
{#                    已经到底啦！！#}
{#                </div>#}
{#            {% endif %}#}
{#        {% endfor %}#}
{#    </ul>#}
{#{% else %}#}
{#    <div class="bottom-info"> 该分类暂无文章 </div>#}
{#{% endif %}#}
{#<p>{{ str1}}</p>#}
{#<p>{{ num }}</p>#}
{# with 做别名#}

{% comment %}
{{ articles.0.title }}
{% with articles.0.title as a0 %}
 {{ a0 }}
{% endwith %}
{% autoescape off %} {# 默认不渲染html格式 所以要可以关掉 #}
    {{ html }}
{% endautoescape %}
{% endcomment %}
{#</body>#}
{#</html>#}